import { useCallback, useState } from "react";
import styles from './index.module.css'

interface TalkStatus { START: boolean, TALKING: boolean, END: boolean }

const allStatus: (keyof TalkStatus)[] = ['START', 'TALKING', 'END'];

const Talk = () => {
    const [status, setStatus] = useState<keyof TalkStatus>('START');

    const changeStatus = useCallback(() => {
        const currentIndex = allStatus.indexOf(status);
        const nextIndex = currentIndex >= allStatus.length - 1 ? 0 : currentIndex + 1;

        setStatus(allStatus[nextIndex])
    }, [status])

    // useEffect(() => {
    //     if (status === 'TALKING') {
    //         setTimeout(() => {
    //             setStatus('END');
    //         }, 3000)
    //     }
    // }, [status])

    return (
        <div
            data-status={status}
            onClick={changeStatus}
            className={styles.talkButton}
        ></div>
    )
}

export default Talk;